<template>
    <div style="text-align: center; margin-top: 120px;">
        <el-upload class="upload-demo" :headers="{ 'json_file': '' }" drag
            action="http://localhost:8000/data/postMutiJobData" multiple>
            <i class="el-icon-upload"></i>
            <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
            <div class="el-upload__tip" slot="tip" style="color: #fff;">只能上传固定格式的Json文件，详细格式见下⬇⬇⬇</div>
        </el-upload>
        <el-button type="text" @click="open">点击查看文件格式要求</el-button>

    </div>
</template>

<script>

export default {
    methods: {
        // 这是打开文档格式的悬浮窗函数
        open() {
            this.$alert(
                // '请使用Json文件，按照键值对完成对应  <strong>这是 <i>HTML</i> 片段</strong>',
                '<style>table { font-size: smaller ;  border-collapse: collapse;margin-top: 20px;}th, td {border: 1px solid #dddddd;text-align: left;padding: 4px;}th {background-color: #f2f2f2;}td {padding-right: 4px;  /* 调整右侧内边距增加间距 */}</style><table><tr><th>Key 键</th><th>Value 值</th><th>Type 类型</th></tr><tr><td>brand_name</td><td>公司名称</td><td>String eg: xxx信息科技有限公司</td></tr><tr><td>job_name</td><td>岗位名称</td><td>String eg: 后端工程师</td></tr><tr><td>scope</td><td>公司规模</td><td>String eg: 20-99人</td></tr><tr><td>salary_desc</td><td>薪资区间</td><td>String eg: 10-15K</td></tr><tr><td>stage</td><td>是否融资</td><td>Bool eg: true/false </td></tr><tr><td>welfare</td><td>福利待遇</td><td>String eg: 加班补助,带薪年假</td></tr><tr><td>city_name</td><td>工作城市</td><td>String eg: 武汉</td></tr><tr><td>area_district</td><td>工作具体区域</td><td>String eg: 洪山区</td></tr><tr><td>skills</td><td>相关技术</td><td>String eg: JavaScript,CSS,Vue</td></tr><tr><td>job_exp</td><td>工作经验</td><td>String eg: 5-10年</td></tr><tr><td>job_degree</td><td>学历要求</td><td>String eg: 本科</td></tr><tr><td>data_from</td><td>数据来源</td><td>String eg: Boss直聘</td></tr><tr><td>lang</td><td>编程语言</td><td>String eg: Python</td></tr></table>',
                {
                    dangerouslyUseHTMLString: true
                }

                , '批量上传文件格式', {
                confirmButtonText: '确定',
                callback: action => {
                    console.log("qifie")
                }
            });
        }
    }
}
</script>


<style scoped></style>